<template>
  <div class="homeswiper">
    <div class="swiper-content">
      <div v-swiper="swiperOptions">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="@/static/img/xinlogo01.png" alt="" />
            <p>萌绘入学指南</p>
          </div>
          <div class="swiper-slide">
            <img src="@/static/img/xinlogo02.png" alt="" />
            <p>APP下载</p>
          </div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev">
          <span></span>
        </div>
        <div class="swiper-button-next" slot="button-next">
          <span></span>
        </div>
      </div>
    </div>
    <div class="swiper-right">
      <div class="add-menghui">
        <img src="@/static/img/xinminilogo01.png" alt="" />
      </div>
      <div class="bbs">
        <img src="@/static/img/xinminilogo02.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  data() {
    return {
      swiperOptions: {
        // autoplay: false, //可选选项，自动滑动
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 4000, //1秒切换一次
        },
      },
    };
  },
};
</script>

<style lang="less">
@media only screen and (min-width: 1240px) {
  .homeswiper {
    width: 1200px;
    .swiper-content {
      width: 860px;
    }
    .swiper-right {
      width: 300px;
    }
  }
}
@media only screen and (min-width: 992px) and (max-width: 1240px) {
  .homeswiper {
    width: 970px;
    .swiper-content {
      width: 690px;
    }
    .swiper-right {
      width: 250px;
    }
  }
}
@media only screen and (max-width: 992px) {
  .homeswiper {
    width: 750px;
    .swiper-content {
      width: 100%;
    }
    .swiper-right {
      width: 100%;
      margin-top: 20px;
      flex-direction: initial !important;
      .add-menghui {
        flex: 1;
        margin-right: 10px;
      }
      .bbs {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
}
@media only screen and (max-width: 768px) {
  .homeswiper {
    width: 100%;
  }
}
.homeswiper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  .swiper-content {
    border-radius: 4px;
    overflow: hidden;
    .swiper-container {
      cursor: pointer;
      .swiper-wrapper {
        .swiper-slide {
          position: relative;
          // height: 400px;
          img {
            width: 100%;
            transition: transform 0.5s;
          }
          p {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            font-size: 18px;
            width: 100%;
            padding: 40px 20px 30px;
            box-sizing: border-box;
            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
          }
        }
      }
      .swiper-pagination {
        text-align: right;
        padding: 20px;
        box-sizing: border-box;
        .swiper-pagination-bullet {
          background: #cdc5be;
          opacity: 1;
          width: 8px;
          border-radius: 4px;
          height: 6px;
          &:hover {
            background: #3361ea;
          }
        }
        .swiper-pagination-bullet.swiper-pagination-bullet-active {
          width: 18px;
          background: #0088cc;
          &:hover {
            background: #3361ea;
          }
        }
      }
      .swiper-button-prev,
      .swiper-button-next {
        width: 10vw;
        height: 10vw;
        min-width: 30px;
        min-height: 30px;
        max-width: 40px;
        max-height: 40px;
        border-radius: 50%;
        margin: 0 -60px;
        opacity: 0;
        background: rgba(0, 0, 0, 0);
        transition: all 0.5s;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          position: relative;
          display: block;
          width: 40%;
          height: 40%;
          left: -10%;
          border-right: 3px solid white;
          border-top: 3px solid white;
          transform: rotate(45deg);
        }
      }
      .swiper-button-prev {
        span {
          left: 10%;
          transform: rotate(-135deg);
        }
      }
      &:hover {
        .swiper-button-prev,
        .swiper-button-next {
          margin: 0;
          opacity: 0.8;
          background: rgba(0, 0, 0, 0.3);
          &:hover {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.6);
          }
        }
        .swiper-wrapper {
          .swiper-slide.swiper-slide-active {
            img {
              transform: scale(1.02);
            }
            p {
              left: -9px;
              width: 102%;
              padding-left: 29px;
            }
          }
        }
      }
    }
  }
  .swiper-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .add-menghui,
    .bbs {
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        transition: transform 0.5s;
      }
      &:hover {
        img {
          transform: scale(1.05);
        }
      }
    }
  }
}
</style>